<template>
  <section class="prd-detail">
    <div class="prd-detail-tt">
      {{levelName}}
    </div>
    <div class="prd-box clearfix">
      <div class="prd-property">
        <div class="prd-wrap">
          <div class="prd-property-tt">
            {{productInfo.productName}}
          </div>
          <div class="prd-property-from clearfix">
            <div class="prd-property-item prd-price">
              <span>
                ￥<i>{{$t('product.inquiry')}}</i>
                <!-- ￥<i>{{productInfo.price}}</i> -->
              </span>
              <!-- / {{productInfo.unit}} -->
            </div>
            <div class="prd-property-item prd-number"
                 v-if="lang ==='zh'">
              <number @changeNumber="changeNumber"></number>
            </div>
          </div>
          <div class="prd-shop-btn"
               @click="addCarts()"
               v-if="lang ==='zh'">{{$t('product.addCart')}}</div>
        </div>
      </div>
      <div class="prd-gallery">
        <img :src="productInfo.img"
             :alt="productInfo.productName"
             v-if="productInfo.img">
      </div>
    </div>
    <div class="main-wrap">
      <div class="prd-tab">
        <ul class="prd-tabbar clearfix">
          <li @click="clickTab(i)"
              v-for="v,i  in tabbar"
              :class="[tabIndex===i?'li-act':'']">
            {{$t('product.'+v.txt)}}
          </li>
        </ul>
      </div>
      <div class="prd-tab__content">
        <div class="prd-tab-pane"
             v-if="tabIndex === 0">
          <div class="prd-tab-img">
            <template v-for="v,i in productInfo.summary">
              <img :src="v"
                   alt="">
            </template>
          </div>
        </div>
        <div class="prd-tab-pane"
             v-if="tabIndex === 1">
          <div class="prd-tab-txt"
               v-html="productInfo.detectAdvantage"
               v-if="productInfo.detectAdvantage"></div>
        </div>
        <div class="prd-tab-pane"
             v-if="tabIndex === 2">
          <div class="prd-tab-txt"
               v-html="productInfo.params"
               v-if="productInfo.params"></div>
        </div>
      </div>
    </div>

  </section>
</template>

<script>
import { mapActions } from 'vuex'
import prdSlide from '../../layout/components/prdSlide.vue'
import Number from '@/components/Number'

import { fetchGetProduct } from '@/api/common'
import { getStore } from '@/utils/common'
export default {
  data() {
    return {
      tabIndex: 0,
      tabbar: [
        {
          txt: 'overview',
        },
        {
          txt: 'detection',
        },
        {
          txt: 'parameter',
        },
      ],
      productNum: 1,
      levelName: '',
      productInfo: {
        productName: '',
        img: '',
        price: '',
        unit: '',
        detectAdvantage: '',
        params: '',
      },
      levelName: getStore('levelName') || '',
      lang: 'zh',
    }
  },
  mounted() {
    this.getProduct()
  },
  components: {
    Number,
    prdSlide,
  },
  methods: {
    ...mapActions(['addGoods']), //es6的扩展运算符
    clickTab(i) {
      this.tabIndex = i
    },
    changeNumber(number) {
      this.productNum = number
    },
    addCarts() {
      //添加数量
      this.productInfo.num = this.productNum
      this.addGoods(this.productInfo)
      this.$message({
        type: 'success',
        message: '加入成功',
      })
    },
    async getProduct() {
      const product = await fetchGetProduct({
        pid: this.$route.params.id,
      })
      if (product.status === 200) {
        this.isCheckProduct = true
        this.levelName = `${product.data.l1}>${product.data.l2}`
        this.productInfo = product.data.lzWebProductDo
      } else {
        this.$router.push({ path: '/product' })
      }
    },
  },
  watch: {
    productInfo: function () {
      this.tabIndex = 0
    },
    '$i18n.locale'(language) {
      this.lang = language
      this.getProduct()
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/theme/mixin.scss';
.prd {
  &-detail {
    &-tt {
      height: 20px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #0e1b2f;
      font-size: 16px;
      margin-bottom: 20px;
    }
  }
  &-box {
    margin-bottom: 20px;
  }
  &-wrap {
    margin: 0 0 36px 220px;
  }
  &-property {
    float: left;
    width: 100%;
    &-tt {
      font-family: Arial-Black, Arial;
      font-weight: 900;
      font-size: 16px;
      color: #0e1b2f;
      margin-bottom: 38px;
    }
    &-from {
      margin-bottom: 32px;
    }
    &-item {
      float: left;
    }
    &-item:nth-child(2) {
      margin-left: 80px;
    }
  }
  &-price {
    span {
      color: #d04a4a;
      font-size: 20px;
    }
    i {
      font-style: inherit;
      font-size: 30px;
    }
  }
  &-number {
    color: #3e4651;
    font-size: 14px;
    margin-top: 14px;
    span {
      display: inline-block;
      width: 18px;
      height: 18px;
      line-height: 16px;
      text-align: center;
      border-radius: 50%;
      border: 1px solid $blue;
      color: $blue;
    }
  }
  &-gallery {
    margin-left: -100%;
    width: 200px;
    float: left;
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    img {
      object-fit: cover;
      display: block;
      width: 200px;
      height: 200px;
    }
  }
  &-tabbar {
    border: 1px solid #dedede;
    border-radius: 100px 100px;
    display: inline-block;
    overflow: hidden;
    li {
      display: inline-block;
      min-width: 100px;
      padding: 0 10px;
      height: 40px;
      line-height: 40px;
      border-left: 1px solid #dedede;
      text-align: center;
      font-size: 16px;
      cursor: pointer;
      color: #7f838a;
      transition: all 0.5s;
    }
    li:hover {
      color: #1681f1;
    }
    li:first-child {
      border-left: 0;
    }
    .li-act {
      background: #1681f1;
      color: #fff !important;
    }
  }
}
.prd-tab {
  &-img {
    img {
      display: block;
      width: 100%;
    }
  }
  &__content {
    margin-top: 20px;
  }
}
.clearfix {
  @include clearfix;
}
</style>
<style lang="scss">
#table1 {
  font-size: 14px;
  border-collapse: collapse;
  border-spacing: 0;
  tr {
    border: 1px solid #c6ccdb;
  }

  td:first-child {
    width: 100px;
  }

  td {
    padding: 8px;
    border: 1px solid #c6ccdb;
  }
}
.prd-tab-txt {
  font-size: 14px;
  line-height: 24px;
}
</style>